import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools,Tabs,DatePicker,Icon,Button,Echarts } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import {getNow} from '../../util/common';
import { getEChartsOption } from '../../public/chart/index'
require('../../style/statistical.less');
require('../../public/icon/iconfont');
const getLabel = Tools.getLabel;


@withRouter
@inject ('statisticalStore','emData')
@observer
class Statistical extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            dataShow:false
        }
    }

    componentWillMount(){
        const {statisticalStore} = this.props;
        const {setDateParams} = statisticalStore;
        let dateParams = getNow();
        setDateParams({
            year:dateParams.year,
            month:dateParams.month
        })
    }    

    componentDidMount() {
        const {statisticalStore} = this.props;
        const {initData} = statisticalStore;
        initData();

    }

    componentWillUnmount(){
        const {statisticalStore} = this.props;
        const {clearData} = statisticalStore;
        clearData();
    }

    render() {
        const {statisticalStore} = this.props;
        const {loading,selectKeyTop,echartsData,dateParams,reimburseData,monthAmount} = statisticalStore;

        const tabs = [
            { title: getLabel(520767,'报销统计') },
            { title: getLabel(520768,'发票统计') },
        ];

        let comment = '';

        if(selectKeyTop == 0){
            comment = (
                <div className={'fna-statistical-reimbursement'}>
                    <div className={'reimbursement-top'} >
                        <div className={`fna-statistical-date`}>  
                            <DatePicker
                                mode="month"
                                onChange={this.getTime}
                            >
                                <span>{dateParams.year} {getLabel(445,'年')} {dateParams.month} {getLabel(6076,'月')} <Icon type={'down'} size={'xxs'} color={'#979797'}/></span>
                            </DatePicker>
                            <Button onClick={()=>{
                                let dateParams = getNow();
                                this.getTime(dateParams.year+'-'+dateParams.month);
                            }}>{getLabel(502859,'本年')}</Button>      
                        </div>
                        <div className={'fna-statistical-reimbursement-doubleCircle'}>
                            <Echarts ref="chart3" option={getEChartsOption(echartsData)} />
                        </div>
                    </div>
                    <div className={'reimbursement-bottom'}>
                        <header>
                            <div>{getLabel(520761,'本月总额')}</div>
                            <div><span>{monthAmount}</span>{getLabel(15279,'元')}</div>
                        </header>
                        <img src='/images/fna/fnaMobile/split-line-03.png' width="100%"/>

                        {
                            JSON.stringify(reimburseData) != '{}' && reimburseData.type.map( (items,index) =>{
                                let comment = '';
                                let listCon = '';
                                listCon = <span>
                                    <div className={'gray'}>{items}</div>
                                    <div className={index ? '' : 'gray'}>{reimburseData.doneReimburse[index]}</div>
                                    <div className={index ? '' : 'gray'}>{reimburseData.doingReimburse[index]}</div>
                                </span>

                                comment = 

                                    <div className="fna-statistical-list" key={index}>
                                        {this.state.dataShow ? listCon :    
                                            (reimburseData.show[index] ? listCon : '')
                                        }
                                    </div>

                                return comment
                            })
                        }
                        <div className={`fna-reimbursement-dataShowBtn`}
                            onClick={()=>{this.setState( (preState) =>({
                                dataShow:!preState.dataShow,
                            }))}} 
                        >
                            {getLabel(519873,'查看详细')}{this.state.dataShow ? <Icon type='icon-xiangshang' size={'xs'}/> : <Icon type='icon-xiangxia' size={'xs'}/> }
                        </div>
                    </div>
                </div>
            )
            
        }else if(selectKeyTop == 1){
            comment = (
                <div className={'fna-statistical-reimbursement'}>
                    <iframe src={'/mobile/plugin/1/invoices_em7_emobile.html'} style={{width:"100%", height:"100%", border:"none"}} id={"InvoiceStatisticsIframe"} name={"InvoiceStatisticsIframe"}/>
                </div>
            )
            
        }
          

        return (
            <div className={'fna-statistical'}>
                <Tabs 
                    tabs={tabs}
                    page={selectKeyTop}
                    onChange={(tab, index) => { this.getTabTop(tab, index) }}
                    onTabClick={(tab, index) => { this.getTabTop(tab, index) }}
                >

                   {comment}
                    
                   
                </Tabs>
            </div>
        )
    }

    //改变顶部tab
    getTabTop = (tab, index) =>{
        const { statisticalStore } = this.props;
        const { setSelectKeyTop } = statisticalStore;
        setSelectKeyTop(index);
    }

    //改变时间
    getTime = (value) =>{
        const {statisticalStore} = this.props;
        const {setDateParams,getEchartsData} = statisticalStore;

        let y = value.split('-')[0];
        let m = value.split('-')[1];
        // console.log('value',value)
        setDateParams({
            year:y,
            month:m
        });


        let params = {
           
        };

        // getEchartsData(params);
    }    



}

export default Statistical;